/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useEffect, useState } from 'react';
import { message, Spin, List } from 'antd';
import { ModalForm } from '@ant-design/pro-form';
import { getLogList } from '@/services/jdk/register';

interface RefuseModalProps {
  user_id: string | any;
  visible: boolean;
  setVisible: (() => void) | any;
}
interface LogListItem {
  user: string;
  text: string;
  phone: string;
  time: string;
}

const RefuseModal: React.FC<RefuseModalProps> = ({ user_id, visible, setVisible }) => {
  const [loading, setloading] = useState<boolean>();
  const [list, setList] = useState<LogListItem[]>([]);
  useEffect(() => {
    if (visible) {
      setloading(true);
      getLogList({ user_id }).then((res) => {
        setloading(false);
        const { code, data, msg } = res;
        if (code == 0) {
          setList(data.list);
        } else {
          message.error(msg);
        }
      });
    }
  }, [visible]);
  return (
    <ModalForm
      title='操作记录'
      visible={visible}
      onVisibleChange={setVisible}
      modalProps={{
        centered: true,
        destroyOnClose: true,
        bodyStyle: { height: 500, overflowY: 'auto' },
      }}
      submitter={false}
    >
      <Spin spinning={loading}>
        <List
          dataSource={list}
          itemLayout='horizontal'
          renderItem={(item, index) => (
            <List.Item key={index}>
              <List.Item.Meta
                title={
                  item.user + (item.user && ' - ') + item.phone + (item.phone && ' - ') + item.text
                }
                description={item.time}
              />
            </List.Item>
          )}
        />
      </Spin>
    </ModalForm>
  );
};

export default RefuseModal;
